<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">

      window.onload = function (){

        //获取全选和反选对象
        var allSelectBut = document.getElementById("allSelect");
        var otherSelectBut = document.getElementById("otherSelect");

        //绑定全选点击事件
        allSelectBut.onclick = function (){

          //获取复选框对象
          var hobbyCheckbox = document.getElementsByName("hobbies");

          //遍历复选框中的所有选项
          for (let i = 0; i < hobbyCheckbox.length ; i++) {
            //把每个选项封装成一个单独的对象
            var hobby = hobbyCheckbox[i];

            //判断，如果当前复选框没有被选中，则改为选中
            if(!hobby.checked){
              hobby.checked = true;
            }

            //同时对每个复选框添加改变事件，点击事件也可以
            hobby.onchange = function (){
              //每个复选框的点击事件都要把所有框遍历一遍，看是否有被取消的
              //如果不做遍历，hobby永远都是最后一个复选框
              for (let j = 0; j < hobbyCheckbox.length; j++) {
                //如果有被取消的，则全选按钮也置为非选择状态
                if(!hobbyCheckbox[j].checked){
                  allSelectBut.checked=false;
                  break;
                }
              }
            }

          }
        }

        //绑定反选点击事件
        otherSelectBut.onclick = function () {
          //获取复选框对象
          var hobbyCheckbox = document.getElementsByName("hobbies");

          //遍历复选框中的所有选项
          for (let i = 0; i < hobbyCheckbox.length; i++) {
            //把每个选项封装成一个单独的对象
            var hobby = hobbyCheckbox[i];

            //如果当前复选框被选中，则改为非选中
            if (hobby.checked) {
              hobby.checked = false;
            }else{
              //如果当前复选框未被选中，则改为选中
              hobby.checked = true;
            }
          }
        }

      }

    </script>
</head>
<body>

  <center>

      <table border="2px">
        <tr>
          <td></td>
          <td width="500px">爱好</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="hobbies" value="underwaterDiving"/>
          </td>
          <td>
            潜水
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="hobbies" value="BungeeJumping"/>
          </td>
          <td>
            蹦极
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="hobbies" value="sportClimbing"/>
          </td>
          <td>
            攀岩
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="hobbies" value="speedDrop"/>
          </td>
          <td>
            速降
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="hobbies" value="parachuting"/>
          </td>
          <td>
            跳伞
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="checkbox" id="allSelect"  name="allSelect"/>全选
            <input type="checkbox" id="otherSelect" name="otherSelect"/>反选
          </td>
        </tr>
      </table>

  </center>

</body>
</html>